{% include "partials/header.html" %}
<meta property="og:title" content="{% if c.og_title %}{{c.og_title}}{%else%}{{c.name}} - Acredito.me{%endif%}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{%if c.customdomain%}http://{{c.customdomain}}{%else%}{{baseurl}}/{{c.urlname}}{%endif%}" />
<meta property="og:image" content="{% if c.og_image != '' %}{{baseurl}}/{{c.og_image}}{%else%}{{baseurl}}/{{c.profile_pic}}{%endif%}" />
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:description" content="{% if c.og_description%} {{c.og_description}} {%else%} Ajude a campanha {{c.name}} agora mesmo de forma simples com o Acredito.me.{%endif%}"/>
<meta property="fb:app_id" content="1503423656375466"/>
</head>
<body>
{% if c.allowmenubar == true %}
  {% include "partials/menubar.html" %}
{% else %}
  <br>
{% endif %}
{% block body %}
<style>
body
{
  background: url("{% if c.imgbg %} {{baseurl}}/{{ c.imgbg }} {% else %} {{baseurl}}/bg.png {% endif %}") !important;
}
.row{
  background-color: #fff;
  padding: 5px;
  margin-left: 2%;
  margin-right: 2%;
}

.img_perfil{
  max-width: 300px;
  border-radius: 100%;
  align-items: center;
}

.logo{
  max-width: 100%;
}

.texto_principal{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 18px;
  text-align: justify;
  line-height: 1.5em;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.texto_doacoes{
  font-size: 17px !important;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

#doar-online{
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.42857143 !important;
  color: #555555 !important;
  background-color: #ffffff !important;
}

#campo_doacoes{
  padding-left: 50px;
  padding-right: 50px;
}

#teste{
  font-size: 15px;
}

.bandeira-banco{
  max-width: 120px;
  margin-bottom: 6px;
  margin-top: 6px;
}

#social_icons{
  margin-right: 20px;
  color: #3f7dbb;
}
#social_icons:hover{
  color: #7aa3cc;
}

#likebox-wrapper * {
   max-width: 100% !important;
}
.share-buttons{
  text-align: right;
  margin-top: 20px;
}
.super-title{
  font-size: 50px;
  text-decoration: none !important;
  font-weight: normal;
  color: #7C916F;
  text-align: center;
}
#main{
  margin-left: 15% !important;
  margin-right: 15% !important;
  padding-left: 0  !important;
  padding-right: 0  !important;
}
@media only screen
  and (max-width: 1600px){
  #main{
      margin-left: 10% !important;
      margin-right: 10% !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
  }
}

@media only screen
   and (max-width : 1024px) {
    .img_perfil{
      max-width: 250px;
      border-radius: 100%;
      align-items: center;
    }
    #main{
      margin-left: 2% !important;
      margin-right: 2% !important;
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .row{
      background-color: #fff;
      padding: 1px !important;
      margin-left: 1% !important;
      margin-right: 1% !important;
    }
}
</style>

<div class="panel" id="main">
	<div class="row">
    <p class="share-buttons">
      {% if c.customdomain%}
      <a href="https://twitter.com/share" class="twitter-share-button" via="acreditome" data-url="http://{{c.customdomain}}">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></a>
      <iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2F{{c.customdomain}}&layout=button_count&size=small&mobile_iframe=true&appId=1503423656375466&width=125&height=20" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
      {% else %}
      <a href="https://twitter.com/share" class="twitter-share-button" via="acreditome" data-url="{{baseurl}}/{{c.urlname}}">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></a>
      <iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Facredito.me%2F{{c.urlname}}&layout=button_count&size=small&mobile_iframe=true&appId=1503423656375466&width=125&height=20" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
      {% endif %}
    </p>
		<div class="col-md-12">
      <!-- <a href="{{baseurl}}/{{c.urlname}}"> -->
        <div class="super-title">{% if c.logo_pic %}<img src="{{baseurl}}/{{ c.logo_pic }}" class="logo" alt="{{baseurl}}/{{ c.name }}">{% else %}{{ c.name }}{% endif %}</div>
      <!-- </a> -->
        <h4 align="center">
          {% if c.facebook_url %}<a href="{{ c.facebook_url }}" target="_blank" id="social_icons"><i class="fa fa-facebook-official fa-2x"></i></a>{% endif %}
          {% if c.instagram_url %}<a href="{{ c.instagram_url }}" target="_blank" id="social_icons"><i class="fa fa-instagram fa-2x"></i></a>{% endif %}
          {% if c.twitter_url %}<a href="{{ c.twitter_url }}" target="_blank" id="social_icons"><i class="fa fa-twitter fa-2x"></i></a>{% endif %}
        </h4>

	</div>
	</div>
	<div class="row">
    <div class="col-md-1"></div>
		<div class="col-md-5">
			<p align=center>
        <img src="{{baseurl}}/{{ c.profile_pic }}" class="img_perfil" alt="{{ c.name }}">
			</p>
		</div>

    {% if c.status == "andamento"%}
		<div class="col-md-5" id="teste">
			<h2 align=left id="text_arrecadamos">
				Já arrecadamos
			</h2>
      <h1 align=left id="temos"></h1>
			<h2 align=left id="text_arrecadamos">
				Precisamos ainda
			</h2>
      <h1 align=left id="precisamos"></h1>
			<h1>
        <div class="progress">
          <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:99%">
  				</div>
  			</div>
      </h1>
    {% endif %}

    {% if c.status == "completa"%}
		<div class="col-md-5" id="teste">
      <h3><span class="label label-success">Campanha Completa</span></h3>
			<h2 align=left id="text_arrecadamos">
        Arrecadamos
			</h2>
      <h1 align=left> R$ {{c.wehave }} </h1>
			<h2 align=left id="text_arrecadamos">
				de R$ {{c.weneed}}
			</h2>
      <!-- <h3 align=left id="precisamos"></h3> -->
			<h1>
        <div class="progress">
          <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  				</div>
  			</div>
      </h1>
    {% endif %}

    {% if c.status == "encerrada"%}
		<div class="col-md-5" id="teste">
    <h3><span class="label label-danger">Campanha Encerrada</span></h3>
			<h2 align=left id="text_arrecadamos">
        <br>
        Arrecadamos
			</h2>
      <h1 align=left> R$ {{c.wehave }} </h1>
			<h2 align=left id="text_arrecadamos">
				de R$ {{c.weneed}}
			</h2>
      <!-- <h3 align=left id="precisamos"></h3> -->
			<h1>
        <div class="progress">
          <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  				</div>
  			</div>
      </h1>
    {% endif %}

    {% if c.status == "recorrente"%}
		<div class="col-md-5" id="teste">
    <h3><span class="label label-info">Campanha Recorrente</span></h3>
			<h2 align=left id="text_arrecadamos">
        <br>
        Arrecadamos
			</h2>
      <h1 align=left> R$ {{c.wehave }} por mês</h1>
			<h3 align=left id="text_arrecadamos">
				 Meta: R$ {{c.weneed}} por mês
			</h3>
      <!-- <h3 align=left id="precisamos"></h3> -->
			<h1>
        <div class="progress">
          <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  				</div>
  			</div>
      </h1>
    {% endif %}

		</div>
    <div class="col-md-1"></div>
    <div class="col-md-12">
      <p class="texto_principal">
        {{ c.description | safe  }}
			</p>
      </p>
    </div>
	</div>
  <div class="row" id="campo_doacoes">
    <h1 align=center>Doe qualquer valor</h1>


  {% if c.bancos %}
    {% set n = 0 %}
    {% if c.bancos.banco1.banco %} {% set n = n + 1 %}{% endif %}
    {% if c.bancos.banco2.banco %} {% set n = n + 1 %}{% endif %}
    {% if c.bancos.banco3.banco %} {% set n = n + 1 %}{% endif %}
    {% if c.bancos.banco4.banco %} {% set n = n + 1 %}{% endif %}

    {% for b in [c.bancos.banco1, c.bancos.banco2, c.bancos.banco3, c.bancos.banco4] %}
    {% if b.banco %}
      {% if n == 1 %} <center> {% endif %}
        <div class="col-md-{{ 12 / n }}">
          <h2 style="font-size:20pt;">
    				 <i class="fa fa-bank fa-1x"></i>{{ b.banco | title}}
    			</h2>
          <img src="{{baseurl}}/img/bancos/{{ b.banco | lower}}.png" class="bandeira-banco">
          <p class="texto_doacoes">
            {{ b.info }} <br>
            <b>Agência:</b> {{ b.ag }} <br>
            <b>Conta:</b> {{ b.conta }} <br>
            {% if b.op %} <b>Operação:</b>  {{b.op}} <br>{% endif %}
            {% if b.cpf %}<b>CPF:</b> {{ b.cpf }} <br>{% endif %}
            {{ b.titular }} <br>
          </p>
        </div>
      {% if n == 1 %} </center> {% endif %}
    {% endif %}
    {% endfor %}
  {% endif %}
  </div>

  {% set n = 0%}
  {% if c.pagseguro %} {% set n = n + 1%} {% endif %}
  {% if c.paypal_link %}{% set n = n + 1%}{% endif %}
  {% if c.paypal_email %}{% set n = n + 1%}{% endif %}
  {% if c.vakinha %}{% set n = n + 1%}{% endif %}
	<div class="row" id="campo_doacoes">
    <br>
    {% if c.pagseguro %}
		<div class="col-md-{{ 12/ n }}" id="doar-online">
      <h2 style="font-size:20pt;">
				 <i class="fa fa-file-o fa-1x"></i> Boleto
			</h2>
			<p align="justify">
				A melhor forma de pagar por boleto é usando o serviço pagseguro, clique abaixo e você será direcionado para a página de doação. Basta escolher a opção boleto.
			</p>
			<p align="center" >
        <img src="{{baseurl}}/img/bancos/pagseguro.png"><br><br>
          <a onclick="centerPopup('{{ c.pagseguro }}', 'doacaoPagseguro', 1200, 800);">
				<button type="submit" class="btn btn-success">Doar com pagseguro</button></a>
			</p>
		</div>
    {% endif %}
    {% if c.paypal_link %}
		<div class="col-md-{{ 12/ n }}" id="doar-online">
      <h2 style="font-size:20pt;">
				 <i class="fa fa-credit-card fa-1x"></i> Cartão de Crédito
			</h2>
			<p align="justify">
				Para ajudar com qualquer quantia com cartão de crédito, recomendados o uso do paypal. Clique abaixo e você será direcionado para a página de doação. Basta escolher o cartão desejado.
			</p>
			<p align="center">
        <img src="{{baseurl}}/img/bancos/paypal.png"><br><br>
        <a onclick="centerPopup('{{ c.paypal_link }}', 'doacaoPaypal', 1200, 800);">
				<button type="submit" class="btn btn-success" method="post" name="currency_code" value="GBP" >Doar com paypal <input type="hidden" name="currency_code" value="GBP"></button></a>
			</p>
		</div>
    {% endif %}
    {% if c.paypal_email %}
		<div class="col-md-{{ 12/ n }}" id="doar-online">
			<h2 style="font-size:20pt;">
				 <i class="fa fa-globe fa-1x"></i> Exterior
			</h2>
      <p align="justify">
        Você também pode ajudar direto do exterior e em qualquer moeda estrangeira, basta clicar no botão abaixo.
        <br><br><br>
			</p>
			<p align="center">
        <img src="{{baseurl}}/img/bancos/paypal.png"><br><br>
				<a onclick="centerPopup('{{baseurl}}/{{c.urlname}}/exterior', 'doacaoExterior', 900, 600);">
          <button type="submit" class="btn btn-success">
            Doar do exterior
          </button>
        </a>
			</p>
		</div>
    {% endif %}
    {% if c.vakinha %}
		<div class="col-md-{{ 12/ n }}" id="doar-online">
			<h2 style="font-size:20pt;">
				<i class="fa fa-clone fa-1x"></i> Outros Sites
			</h2>
			<p align="justify">
				Você também pode ajudar pelo site vakinha, um site de vaquinhas onlines. Mas lá eles ficam com uma <a href="https://www.vakinha.com.br/taxas-e-termos-de-uso-2">taxa</a> de 6,4% do valor original, que no caso de um tratamento de AME1, siginifica um valor de 192 mil reais.
			</p>
      <p align="center">
        <img src="{{baseurl}}/img/bancos/vakinha.png" style="max-height:30px;"><br><br>
				<a href="{{ c.vakinha }}" target="_blank"><button type="submit" class="btn btn-success">Acessar Vakinha</button></a>
			</p>
		</div>
    {% endif %}
	</div>
	<div class="row">
    <br>
		<div class="col-md-1">
		</div>

    <!-- teste -->

    {% if c.galeria != '' %}

  		<div class="col-md-10">
        <h2 align="center">
          <h1 align="center">Galeria de Fotos</h1><br>
          				<div class="slide">
          					<div class="demo-gallery">
          		            <ul id="lightgallery" class="list-unstyled row">
                              {% for foto in c.galeria %}
          		                <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="{{baseurl}}/{{ foto }} 375, {{baseurl}}/{{ foto }} 480, {{baseurl}}/{{ foto }} 800" data-src="{{baseurl}}/{{ foto }}" data-sub-html="">
          		                    <a href="">
          		                        <img class="img-responsive" src="{{baseurl}}/{{ foto }}">
          		                    </a>
                              </li>
                              {% endfor %}

          		            </ul>
          		        </div>
        </h2>
  		</div>
  		<div class="col-md-1">
  		</div>
  	</div>
    {% endif %}
</div>

  <div class="row" id="campo_doacoes">
    <div class="col-md-4" ></div>
    <div class="col-md-4" >
      <h2 align="center">
         Contatos
      </h2>
      <p class="texto_doacoes">
          {% if c.wpp_contato%}<b>Whatsapp :</b> {{ c.wpp_contato }} <br>{% endif %}
          {% if c.wpp2_contato%}<b>Whatsapp Alternativo:</b> {{ c.wpp2_contato }}<br>{% endif %}
          {% if c.telefone_contato%}<b>Telefone para contato:</b> {{ c.telefone_contato }} <br>{% endif %}
          {% if c.email_contato%}<b>E-mail:</b> {{ c.email_contato }}<br>{% endif %}
          {% if c.facebook_url%}<b>Siga a gente no</b> <a href="{{ c.facebook_url }}" target="_blank">Facebook</a> <br>{% endif %}
          {% if c.instagram_url%}<b>Acompanhe também no</b> <a href="{{ c.instagram_url }}" target="_blank">Instagram</a> <br>{% endif %}
          {% if c.facebook_url%}<b>Messenger:</b> <a href="{{ c.facebook_url  | replace('facebook.com', 'm.me') }}" target="_blank">Mandar mensagem</a> <br>{% endif %}<br><br>
        </p>
    </div>
    <div class="col-md-4"></div>
</div>
</div>
</div>

</div>

<script>
var temos = {{ c.wehave | replace(".", "") | replace(",", ".") }};
var total = {{ c.weneed | replace(".", "") | replace(",", ".") }};
var porcentagem = 50;
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('#lightgallery').lightGallery();
});
</script>
<script src="{{baseurl}}/js/acredito.js"></script>
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="{{baseurl}}/js/lightgallery.js"></script>
<script src="{{baseurl}}/js/lg-fullscreen.js"></script>
<script src="{{baseurl}}/js/lg-thumbnail.js"></script>
<script src="{{baseurl}}/js/lg-video.js"></script>
<script src="{{baseurl}}/js/lg-autoplay.js"></script>
<script src="{{baseurl}}/js/lg-zoom.js"></script>
<script src="{{baseurl}}/js/lg-hash.js"></script>
<script src="{{baseurl}}/js/lg-pager.js"></script>
<script src="{{baseurl}}/js/jquery.mousewheel.min.js"></script>

{% endblock %}
{% include "partials/footer.html" %}
